<template>
  <div class="app-container">
    <div id="main" style="width: 100%;height:800px;background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);" />
    <!-- ECharts will render here -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { staffsDepartmentCount } from '@/api/table.js'

export default {
  data() {
    return {
      chartData: []
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await staffsDepartmentCount();
        
        if (response.data.code === 200) {
          this.chartData = response.data.data;
          this.initChart();
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        // 使用默认数据
        this.chartData = [
          { departmentName: "技术部", count: 15 },
          { departmentName: "产品部", count: 8 },
          { departmentName: "运营部", count: 12 }
        ];
        this.initChart();
      }
    },
    
    initChart() {
      const myChart = echarts.init(document.getElementById('main'));
      
      const departments = this.chartData.map(item => item.departmentName);
      const counts = this.chartData.map(item => item.count);
      
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '员工部门分布统计',
          subtext: 'Employee Department Distribution',
          left: 'center',
          top: '5%',
          textStyle: {
            color: '#ffffff',
            fontSize: 34,
            fontWeight: 'bold',
            textShadowColor: 'rgba(255, 107, 107, 0.9)',
            textShadowOffsetX: 3,
            textShadowOffsetY: 3,
            textShadowBlur: 15
          },
          subtextStyle: {
            color: '#fff3cd',
            fontSize: 18,
            textShadowColor: 'rgba(254, 202, 87, 0.7)',
            textShadowBlur: 8
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 107, 107, 0.95)',
          borderColor: '#feca57',
          borderWidth: 3,
          borderRadius: 12,
          boxShadow: '0 12px 40px rgba(255, 107, 107, 0.5)',
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          formatter: function(params) {
            return `<div style="padding: 18px; border-radius: 10px; background: linear-gradient(45deg, rgba(254, 202, 87, 0.3), rgba(255, 159, 243, 0.3));">
              <div style="color: #ffffff; font-weight: bold; margin-bottom: 10px; text-shadow: 0 3px 6px rgba(0,0,0,0.4);">${params[0].name}</div>
              <div style="color: #fff3cd;">员工人数: <span style="color: #feca57; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">${params[0].value}</span></div>
            </div>`;
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: departments,
          axisLine: {
            lineStyle: {
              color: '#ffffff',
              width: 4,
              shadowColor: 'rgba(255, 255, 255, 0.7)',
              shadowBlur: 12
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 18,
            fontWeight: 'bold',
            rotate: 0,
            margin: 15,
            textShadowColor: 'rgba(255, 107, 107, 0.9)',
            textShadowBlur: 6
          },
          axisTick: {
            lineStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              shadowBlur: 6
            }
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: '#ffffff',
              width: 4,
              shadowColor: 'rgba(255, 255, 255, 0.7)',
              shadowBlur: 12
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 18,
            fontWeight: 'bold',
            textShadowColor: 'rgba(255, 107, 107, 0.9)',
            textShadowBlur: 6
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.4)',
              type: 'dashed',
              shadowColor: 'rgba(254, 202, 87, 0.5)',
              shadowBlur: 4
            }
          },
          axisTick: {
            lineStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              shadowBlur: 6
            }
          }
        },
        series: [
          {
            name: '员工人数',
            type: 'line',
            data: counts,
            smooth: true,
            symbol: 'circle',
            symbolSize: 12,
            lineStyle: {
              color: '#feca57',
              width: 6,
              shadowColor: 'rgba(254, 202, 87, 0.9)',
              shadowBlur: 20,
              shadowOffsetY: 4
            },
            itemStyle: {
              color: '#feca57',
              borderColor: '#ffffff',
              borderWidth: 5,
              shadowColor: 'rgba(254, 202, 87, 1)',
              shadowBlur: 25
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(254, 202, 87, 0.9)' },
                { offset: 0.3, color: 'rgba(255, 107, 107, 0.7)' },
                { offset: 0.7, color: 'rgba(255, 159, 243, 0.5)' },
                { offset: 1, color: 'rgba(254, 202, 87, 0.1)' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: '#ffffff',
                borderColor: '#feca57',
                borderWidth: 6,
                shadowColor: 'rgba(255, 255, 255, 1)',
                shadowBlur: 30
              }
            },
            animationDuration: 2000,
            animationEasing: 'cubicOut'
          }
        ],
        animationDuration: 3000,
        animationEasing: 'elasticOut'
      };
      
      myChart.setOption(option);
      
      // 添加窗口大小变化监听
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {});
  }
}
</script>

<style scoped>
.app-container {
  /* padding: 20px; */
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  /* min-height: 100vh; */
}

#main {
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border: 4px solid rgba(254, 202, 87, 0.6);
  box-shadow: 0 25px 80px rgba(255, 107, 107, 0.5), 0 0 40px rgba(254, 202, 87, 0.4);
}
</style>

